<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版涂鸦</title>
</head>

<body>
    <div style="text-align: center;">
        <canvas id="canElem">

        </canvas>
        <footer>by ma rong yi <br>2023.11.10</footer>
    </div>
    <!-- 在js中绘制图形 -->
    <script>
        //获得画布
        var canvas = document.getElementById('canElem');
        //准备画笔（获得画布的上下文）
        var context = canvas.getContext('2d');
        //设置画笔属性
        context.linewidth = '3';
        // context.strokeStyle = '#f00';
        context.lineCap = 'round';
        //设置画布的属性
        canvas.width = 900;
        canvas.height = 600;
        canvas.style.border = '1px solid #aaa';
        //笑脸的制作
        context.beginPath(); //开始路径
        context.fillStyle = 'orange';
        context.arc(200, 200, 100, 0, 2 * Math.PI, true) //绘制一个圆
        context.closePath(); //关闭路径
        context.stroke(); //描边
        context.fill(); //填充
        //左眼
        context.beginPath();
        context.strokeStyle = '#fff';
        context.linewidth = 3;
        context.arc(170, 160, 20, 0, Math.PI, true); //描绘圆弧
        context.stroke();
        //右眼
        context.beginPath();
        context.strokeStyle = '#fff';
        context.linewidth = 2;
        context.arc(230, 160, 20, 0, Math.PI, true); //描绘圆弧
        context.stroke();
        //嘴巴上弧线
        context.beginPath();
        context.linewidth = 3;
        context.strokeStyle = '#fff';
        context.arc(200, 210, 50, 0, Math.PI, false);
        context.stroke();

        //嘴巴下弧线
        context.beginPath();
        context.linewidth = 2;
        context.strokeStyle = '#fff';
        context.arc(200, 195, 50, 0.05 * Math.PI, 0.95 * Math.PI, false);
        context.stroke();












        // //绘制矩形
        // context.strokeRect(112, 10, 30, 30, );

        // context.fillRect(0, 0, 50, 50); //填充

        // context.clearRect(10, 10, 30, 30); //清除














        // //绘制三角形
        // context.beginPath(); //开始路径
        // context.moveTo(100, 100); //定义起点位置
        // context.lineTo(300, 300); //一个端点
        // context.lineTo(100, 300); //另一个端点
        // context.closePath(); //结束路径
        // context.stroke(); //描边
        // context.fill(); //填充
    </script>
</body>

</html>